<template>
  <div>
    <div class="page">
      <h1 class="page-title">全部商品</h1>
      <!-- 购物车内容 -->
      <div class="shopcart-box">
        <div class="shopcart-hd row">
          <div class="col hd-checkbox">
            <!-- 全选 -->
            <el-checkbox label="全选" v-model="selectAll" @change="checkAll" :disabled="unSelectAll"></el-checkbox>
          </div>
          <div class="col hd-goods">商品</div>
          <div class="col hd-count">数量</div>
          <div class="col hd-price">单价（元）</div>
          <div class="col hd-sum">金额（元）</div>
          <div class="col hd-action">操作</div>
        </div>
        <div class="shopcart-bd" v-if="shopcartList.length">
          <div class="store-wrapper" v-if="store.products.length" v-for="(store, index) in shopcartList" :key="index">
            <!-- 选择店铺 -->
            <el-checkbox :label="store.storeName" v-model="store.checked" class="store-name" @change="checkStore(store)" :disabled="store.unselcetable"></el-checkbox>
            <div class="shopcart-list">
              <!-- 店铺优惠 -->
              <ul class="store-promo promotion" v-if="store.storeActivityInfo">
                <li class="promo-item" v-for="(storePromo, index1) in store.storeActivityInfo" :key="index1">
                  <span class="tag">{{FavourableActivityTypes.Types[storePromo.type]}}</span>
                  <span class="text">{{storePromo.activityName}}</span>
                  <router-link class="link" :to="'/activity?activeId=' + storePromo.activityId">去凑单<i class="el-icon-arrow-right"></i></router-link>
                </li>
              </ul>
              <!-- 购买的商品 -->
              <div class="goods-list">
                <div class="goods-item row" v-for="(good, index2) in store.products" :key="index2">
                  <!-- 商品优惠 -->
                  <ul class="goods-promo promotion" v-if="good.activityInfo || good.isOldTea == 1">
                    <li class="promo-item" v-if="good.activityInfo">
                      <span class="tag">{{FavourableActivityTypes.Types[good.activityInfo.type]}}</span>
                      <span class="text">{{good.activityInfo.activityName}}</span>
                      <router-link class="link" :to="'/activity?activeId=' + good.activityInfo.activityId">去凑单<i class="el-icon-arrow-right"></i></router-link>
                    </li>
                    <span class="goods-desc">老茶属性商品订单需分开提交,待客服确认后即可支付</span>
                  </ul>
                  <div class="col cell-checkbox">
                    <!-- 选择商品 -->
                    <el-checkbox v-model="good.checked"  @change="checkGood(store, good)" :disabled="good.unselcetable"></el-checkbox>
                  </div>
                  <div class="col cell-img">
                    <img :src="good.productCover" width="140" height="140">
                  </div>
                  <div class="col cell-goods">
                    <router-link class="goods-name" :to="'/goods/goodsDetail?productId=' + good.productId">{{good.name}}</router-link>
                    <div class="row goods-form" v-for="(attr, index3) in good.attributes" :key="index3">
                      <div class="col cell-cehckbox">
                        <!-- 选择规格 -->
                        <el-checkbox v-model="attr.checked" @change="checkAttr(store, good, attr)" :disabled="attr.unselcetable"></el-checkbox>
                      </div>
                      <div class="col cell-unit">规格：{{attr.attributeName}}</div>
                      <div class="col cell-count">
                        <v-counter :cartAttributeId="attr.cartAttributeId" :amount="attr.amount - 0" :lower="attr.amountLower" @amount-change="amountChange"></v-counter>
                      </div>
                      <div class="col cell-price">
                        <span class="sell-price">¥{{attr.sellPrice}}</span>
                        <span class="original-price">¥{{attr.originalPrice}}</span>
                      </div>
                      <div class="col cell-sum">
                        <slot slot-scope="attr">
                          {{(attr.sellPrice * attr.amount).toFixed(2)}}
                        </slot>
                      </div>
                      <div class="col cell-action">
                        <span class="btn" @click="delAttr(attr)">删除</span>
                        <!-- <span class="btn">移入收藏</span> -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="empty-box" v-else>
          <img src="../../assets/images/empty.png">
          <p class="tip">您的采购单是空的哟～</p>
        </div>
      </div>
      <!-- 为你推荐 -->
      <h3 class="main-title"><span>为你推荐</span></h3>
      <section class="tea-selection">
        <swiper class="selection" :options="selectionOptions" ref="selection" v-if="this.selectionGoods.length">
          <swiper-slide v-for="(item, index) in selectionGoods" :key="index">
            <div class="product-item">
              <router-link class="product-box" :to="'/goods/goodsDetail?productId=' + item.productId" target="_blank">
                <div class="product-img">
                  <img class="img" :src="item.productCover" width="192" height="192">
                </div>
                <div class="product-info">
                  <div class="sell">
                    <span class="discount">{{item.discount ? item.discount : '?'}}折</span>
                    <span class="sell-price">
                      <em>¥</em>
                      <span v-if="item.sellPrice">{{item.sellPrice | priceFormat1}}</span>
                      <span v-else>?</span>
                      <i class="sell-type">/{{item.sellType}}</i>
                    </span>
                    <span class="orignal-price">¥{{item.originalPrice | priceFormat1}}</span>
                  </div>
                  <div class="name">{{item.name}}</div>
                  <div class="pro-grade-name" v-if="item.proGradeName">{{item.proGradeName}}</div>
                  <router-link :to="'/store/storeInfo?storeId=' + item.storeId" class="store clearfix">{{item.storeName}}</router-link>
                  <div class="discounts" v-if="item.activityList">
                    <div class="tag-group" v-if="item.activityList.isMore === '1'">
                      <span class="tag" v-for="(tag, index1) in item.activityList.type" :key="index1">{{FavourableActivityTypes.Types[tag]}}</span>
                    </div>
                    <div class="tag-group" v-else>
                      <span class="tag">{{item.activityList.activityName}}</span>
                    </div>
                  </div>
                  <div class="keywords">
                    <span v-if="item.k1" class="w1">{{item.k1}}</span>
                    <span v-if="item.k2" class="w2"><i class="text">{{item.k2}}</i></span>
                    <span v-if="item.k3" class="w3">{{item.k3}}</span>
                  </div>
                </div>
              </router-link>
            </div>
          </swiper-slide>
        </swiper>
        <div class="swiper-button-prev prev-btn"><i class="el-icon-arrow-left"></i></div>
        <div class="swiper-button-next next-btn"><i class="el-icon-arrow-right"></i></div>
      </section>
    </div>
    <!-- 购物车工具栏 -->
    <div class="cart-floatbar-wrapper" id="floatbar" v-if="shopcartList.length">
      <div class="cart-floatbar" :class="isFixed === true ? 'fixed' : ''">
        <div class="row w">
          <div class="col cell-checkbox">
            <!-- 全选 -->
            <el-checkbox label="全选" v-model="selectAll" @change="checkAll" :disabled="unSelectAll"></el-checkbox>
          </div>
          <div class="col cell-action">
            <span class="btn" @click="delShopcart">删除</span>
          </div>
          <div class="col cell-total">
            已选<span class="total-count">{{totalAmount}}</span>件
          </div>
          <div class="col cell-sum">
            合计：<span class="total-price">¥{{totalPrice}}</span><span class="description" v-show="totalPrice != 0">(不含运费)</span>
          </div>
          <div class="col cell-account" @click="account">去结算</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vCounter from '@/components/public/counter'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { getWh, getPosition } from '@/util/element'
import { FavourableActivityTypes } from '@/util/enums'
export default {
  data () {
    return {
      shopcartList: [], // 购物车内容
      totalPrice: 0, // 商品总价
      totalAmount: 0, // 商品总数
      FavourableActivityTypes: FavourableActivityTypes, // 优惠类型
      selectAll: false, // 是否全选所有商品
      unSelectAll: false, // 是否不可全选所有商品（当老茶与其他商品同时存在时不可全选）
      selectionGoods: [], // 为你推荐商品
      selectionOptions: { // 为你推荐swiper配置
        slidesPerView: 5,
        slidesPerGroup: 5,
        spaceBetween: 10,
        speed: 500,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        },
        loop: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      isFixed: false,
      isLoading: false
    }
  },
  components: {
    vCounter,
    swiper,
    swiperSlide
  },
  computed: {
    'isOldTea': function () {
      let type = ''
      this.shopcartList.forEach(s => {
        s.products.forEach(p => {
          p.attributes.forEach(a => {
            if (a.checked) {
              type = p.isOldTea
            }
          })
        })
      })
      return type
    }
  },
  mounted () {
    this.getShopcart().then(() => {
      this.initFixedBar()
      this.countPrice()
      this.countAmount()
    })
    this.getRecommend()
    window.onscroll = () => {
      this.initFixedBar()
    }
  },
  methods: {
    // 获取购物车内容
    getShopcart () {
      return new Promise(resolve => {
        this.$http.post(this.$api + '/pc/orderShoppingCart/myShoppingCar', {}).then(res => {
          if (res.responseCode === '0000') {
            this.isUnselectAble(res.data).then(flag => {
              this.unSelectAll = flag
            })
            for (let i = 0; i < res.data.length; i++) {
              const store = res.data[i]
              this.isUnselectAble(store.products).then(flag => {
                this.$set(store, 'unselcetable', flag)
              })
              this.$set(store, 'checked', this.selectAll)
              store.products.forEach(good => {
                this.$set(good, 'checked', this.selectAll)
                this.$set(good, 'unselcetable', false) // 是否不可选
                good.attributes.forEach(attr => {
                  this.$set(attr, 'checked', this.selectAll)
                  this.$set(attr, 'unselcetable', false) // 是否不可选
                })
              })
            }
            this.shopcartList = res.data
            this.countAmount()
            this.countPrice()
            return resolve()
          }
        })
      })
    },
    // 商品数量改变，重新请求购物车数据
    amountChange (obj) {
      let param = {
        cartAttributeId: obj.cartAttributeId,
        number: obj.amount
      }
      this.$http.post(this.$api + '/pc/orderShoppingCart/updateShoppingCar', param).then(res => {
        if (res.responseCode === '0000') {
          this.$store.dispatch('shopcart/getShopcart')
          this.getShopcart()
        } else {
          return false
        }
      })
    },
    // 设置结算栏定位方式
    initFixedBar () {
      if (this.shopcartList.length) {
        let windowH = window.innerHeight
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        let dom = document.getElementById('floatbar')
        // 如果dom不存在，返回
        if (!dom) {
          return false
        }
        let domH = getWh(dom, 'height')
        let offsetTop = getPosition(dom, 'top')
        if (windowH >= offsetTop) {
          this.isFixed = false
        } else {
          if ((windowH + scrollTop) <= (offsetTop + domH / 2)) {
            this.isFixed = true
          } else {
            this.isFixed = false
          }
        }
      } else {
        return false
      }
    },
    // 全选
    checkAll (val) {
      this.shopcartList.forEach(store => {
        store.checked = val
        store.products.forEach(good => {
          good.checked = val
          good.attributes.forEach(attr => {
            attr.checked = val
          })
        })
      })
      this.countPrice()
      this.countAmount()
    },
    // 判断是否不可全选
    isUnselectAble (list) {
      return new Promise(resolve => {
        let products = []
        let flag = false
        list.forEach(item => {
          if (item.hasOwnProperty('products')) {
            item.products.forEach(good => {
              products.push(good)
            })
          } else {
            products.push(item)
          }
        })
        flag = products.every(item => item.isOldTea === 1) || products.every(item => item.isOldTea === 2)
        return resolve(!flag)
      })
    },
    // 选择店铺
    checkStore (store) {
      // 判断当前操作为全选还是取消
      let flag = store.checked
      let type = store.products[0].isOldTea // 获取当前店铺是否为老茶品类
      if (flag) { // 全选
        this.shopcartList.forEach(s => {
          if (s.storeId === store.storeId) { // 当前店铺
            s.checked = true
            s.products.forEach(p => {
              p.checked = true
              p.attributes.forEach(a => {
                a.checked = true
              })
            })
          } else { // 其他店铺
            // 判断该店铺是否可全选
            if (s.unselcetable) { // 不可全选
              s.products.forEach(p => {
                if (p.isOldTea !== type) { // 若该商品与当前品类不同，则禁用
                  p.unselcetable = true
                  p.attributes.forEach(a => {
                    a.unselcetable = true
                  })
                }
              })
            } else { // 可全选
              let storeType = s.products[0].isOldTea
              if (storeType !== type) { // 若该店不含当前品类，则禁用
                s.unselcetable = true
                s.products.forEach(p => {
                  p.unselcetable = true
                  p.attributes.forEach(a => {
                    a.unselcetable = true
                  })
                })
              }
            }
          }
        })
      } else { // 取消
        this.isUnselectAble(this.shopcartList).then(resolve => {
          this.unSelectAll = resolve
          this.shopcartList.forEach(s => {
            if (s.storeId === store.storeId) { // 取消当前店铺全选
              s.products.forEach(p => {
                p.checked = false
                p.attributes.forEach(a => {
                  a.checked = false
                })
              })
            }
            this.isUnselectAble(s.products).then(sresolve => { // 初始化可否全选状态
              s.unselcetable = sresolve
              s.products.forEach(g => {
                g.unselcetable = false
                g.attributes.forEach(a => {
                  a.unselcetable = false
                })
              })
            })
          })
        })
      }
      // 判断是否全选
      if (this.shopcartList.every(item => item.checked === true)) {
        this.selectAll = true
      } else {
        this.selectAll = false
      }
      this.countPrice()
      this.countAmount()
    },
    // 选择商品
    checkGood (store, good) {
      // 设置全选该店铺商品
      if (store.products.every(item => item.checked === true)) {
        store.checked = true
        // 判断是否全选
        if (this.shopcartList.every(item1 => item1.checked === true)) {
          this.selectAll = true
        } else {
          this.selectAll = false
        }
      } else {
        store.checked = false
        this.selectAll = false
      }
      store.products.forEach(item => {
        if (item.productId === good.productId) {
          item.attributes.forEach(attr => {
            attr.checked = item.checked
          })
        }
      })
      this.countPrice()
      this.countAmount()
      if (!good.checked) { // 当取消商品选中时重置所有商品可选状态
        this.shopcartList.forEach(store => {
          store.products.forEach(item => {
            item.unselcetable = false
            item.attributes.forEach(attr => {
              attr.unselcetable = false
            })
          })
        })
      } else {
        this.shopcartList.forEach(store => {
          store.products.forEach(item => {
            if (item.isOldTea !== good.isOldTea) {
              item.unselcetable = true
              item.attributes.forEach(attr => {
                attr.unselcetable = true
              })
            } else {
              item.unselcetable = false
              item.attributes.forEach(attr => {
                attr.unselcetable = false
              })
            }
          })
        })
      }
    },
    // 选择规格
    checkAttr (store, good, attr) {
      let selection = ''
      this.shopcartList.forEach(s => {
        s.products.forEach(p => {
          p.attributes.forEach(a => {
            if (a.checked) {
              selection = p.isOldTea
            }
          })
        })
      })
      if (!attr.checked) { // 取消
        if (selection) { // 如果当前仍有选中项，则非该选中项同类型禁用
          this.shopcartList.forEach(s => {
            s.products.forEach(p => {
              if (p.isOldTea === selection) {
                p.attributes.forEach(a => {
                  a.unselcetable = false
                })
              } else {
                p.attributes.forEach(a => {
                  a.unselcetable = true
                })
              }
            })
          })
        } else {
          this.shopcartList.forEach(s => {
            this.isUnselectAble(s.products).then(res => {
              s.unselcetable = res
              s.products.forEach(p => {
                p.unselcetable = false
                p.attributes.forEach(a => {
                  a.unselcetable = false
                })
              })
            })
          })
        }
      } else { // 选择规格
        this.shopcartList.forEach(store => {
          store.unselcetable = !store.products.every(p => p.isOldTea === good.isOldTea)
          store.products.forEach(item => {
            if (item.isOldTea !== good.isOldTea) {
              item.unselcetable = true
              item.attributes.forEach(a => {
                a.unselcetable = true
              })
            } else {
              item.unselcetable = false
              item.attributes.forEach(a => {
                a.unselcetable = false
              })
            }
          })
        })
      }
      // 判断是否全选该商品规格
      if (good.attributes.every(item => item.checked === true)) {
        good.checked = true
        // 判断是否全选该店铺商品
        if (store.products.every(item1 => item1.checked === true)) {
          store.checked = true
          // 判断是否全选
          if (this.shopcartList.every(item2 => item2.checked === true)) {
            this.selectAll = true
          } else {
            this.selectAll = false
          }
        } else {
          store.checked = false
          this.selectAll = false
        }
      } else {
        good.checked = false
        store.checked = false
        this.selectAll = false
      }
      this.countPrice()
      this.countAmount()
    },
    // 计算个数
    countAmount () {
      this.totalAmount = 0
      this.shopcartList.forEach(store => {
        store.products.forEach(good => {
          good.attributes.forEach(attr => {
            if (attr.checked) {
              this.totalAmount += Number(attr.amount)
            }
          })
        })
      })
    },
    // 计算总价
    countPrice () {
      this.totalPrice = 0
      this.shopcartList.forEach(store => {
        store.products.forEach(good => {
          good.attributes.forEach(attr => {
            if (attr.checked) {
              this.totalPrice += attr.sellPrice * attr.amount
            }
          })
        })
      })
      this.totalPrice = this.totalPrice.toFixed(2)
    },
    // 为你推荐
    getRecommend () {
      this.$http.post(this.$api + '/pc/home/recommend', {
        page: 1,
        pageSize: 20
      }).then(res => {
        if (res.responseCode === '0000') {
          res.data.forEach(item => {
            if (item.keywords) {
              let arr = item.keywords.split(',')
              item.k1 = arr[0] || ''
              item.k2 = arr[1] || ''
              item.k3 = arr[2] || ''
            }
          })
          this.selectionGoods = res.data
        }
      })
    },
    // 删除选中的商品
    delShopcart () {
      if (!this.isLoading) {
        this.isLoading = true
        let selected = []
        this.shopcartList.forEach(store => {
          store.products.forEach(good => {
            good.attributes.forEach(attr => {
              if (attr.checked) {
                selected.push(attr.cartAttributeId)
              }
            })
          })
        })
        if (selected.length) {
          this.$http.post(this.$api + '/pc/orderShoppingCart/delShoppingCar', {
            cartAttributeIds: selected.toString() || ''
          }).then(res => {
            if (res.responseCode === '0000') {
              this.$message({
                type: 'success',
                duration: this.$store.state.duration,
                message: res.responseMsg,
                onClose: () => {
                  this.$store.dispatch('shopcart/getShopcart')
                  this.getShopcart()
                  this.isLoading = false
                }
              })
            }
          })
        } else {
          this.$message.error('请选择要删除的商品！')
          this.isLoading = false
        }
      }
    },
    // 删除规格
    delAttr (attr) {
      if (!this.isLoading) {
        this.isLoading = true
        this.$http.post(this.$api + '/pc/orderShoppingCart/delShoppingCar', {
          cartAttributeIds: attr.cartAttributeId
        }).then(res => {
          if (res.responseCode === '0000') {
            this.$message({
              type: 'success',
              duration: this.$store.state.duration,
              message: res.responseMsg,
              onClose: () => {
                this.$store.dispatch('shopcart/getShopcart')
                this.getShopcart()
                this.isLoading = false
              }
            })
          }
        }).catch(err => {
          console.error(err)
          this.isLoading = false
        })
      }
    },
    // 结算
    account () {
      if (!this.isLoading) { // 判断是否有请求正在加载中
        if (this.$store.state.user.PCToken) { // 判断是否已登录
          if (Number(this.$store.state.user.status) === 4) { // 判断是否已通过审核（完善资料）
            let stores = []
            this.shopcartList.forEach(store => {
              let products = []
              store.products.forEach(good => {
                let attributes = []
                good.attributes.forEach(attr => {
                  if (attr.checked && attr.amount) {
                    attributes.push({
                      amount: attr.amount,
                      attributeId: attr.attributeId,
                      cartAttributeId: attr.cartAttributeId,
                      priceId: attr.priceId
                    })
                  }
                })
                if (attributes.length) {
                  let pobj = {
                    productId: good.productId,
                    attributes: attributes
                  }
                  products.push(pobj)
                }
              })
              if (products.length) {
                let sobj = {
                  storeId: store.storeId,
                  products: products
                }
                stores.push(sobj)
              }
            })
            if (this.totalAmount) { // 判断购买数量是否为0
              // 组合总参数
              let param = {
                balanceType: '1', // 0:立即购买，1:购物车结算
                shops: JSON.stringify(stores)
              }
              // 发送请求
              this.$http.post(this.$api + '/pc/order/balanceOrder', param).then(res => {
                if (res.responseCode === '0000') {
                  // 把结算单信息存入localstroage
                  window.localStorage.setItem('orderInfo', JSON.stringify(res.data))
                  this.$router.push({
                    path: '/order/confirmOrder',
                    query: {
                      submitType: 1,
                      isOldTea: this.isOldTea
                    }
                  })
                } else {
                  this.$message({
                    type: 'error',
                    message: res.responseMsg,
                    duration: this.$store.state.duration
                  })
                }
              })
            } else {
              this.$message({
                type: 'error',
                message: '购买数量不能为0',
                duration: this.$store.state.duration
              })
            }
          } else {
            this.$message({
              type: 'error',
              message: '您的资料信息正在审核中......',
              duration: this.$store.state.duration,
              onClose: () => {
                // this.$router.push('/login')
              }
            })
          }
        } else {
          this.$message({
            type: 'error',
            message: '请登录账户后再加入购物车！',
            duration: this.$store.state.duration,
            onClose: () => {
              this.$router.push('/login')
            }
          })
        }
      } else {
        return false
      }
    },
    // 停止自动轮播
    slideStop (name) {
      this.$refs[name].swiper.autoplay.stop()
    },
    // 开始自动轮播
    slideStart (name) {
      this.$refs[name].swiper.autoplay.start()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';
.shopcart-box {
  margin: 0 auto;
  width: 1200px;
  overflow: hidden;
  .shopcart-hd {
    padding: 0 90px 0 20px;
    height: 45px;
    line-height: 45px;
    font-size: $fz_14;
    color: $f_main;
    background: #e9e9e9;
    .hd-checkbox {
      padding-right: 18px;
      .el-checkbox {
        color: $f_main;
      }
    }
    .hd-goods {
      padding: 0 186px;
    }
    .hd-count {
      padding: 0 31px;
    }
    .hd-price {
      padding: 0 65px;
    }
    .hd-sum {
      padding: 0 42px;
    }
    .hd-action {
      width: 180px;
      text-align: right;
    }
  }
  .shopcart-bd {
    margin-bottom: 20px;
    .store-wrapper {
      margin-top: 20px;
      .store-name {
        margin-bottom: 20px;
        font-size: $fz_14;
        color: $f_main;
      }
      .shopcart-list {
        border: solid 1px $border_color;
        border-width: 5px 0 0 0;
        .store-promo {
          margin-bottom: 10px;
        }
        .goods-list {
          .goods-item {
            margin-bottom: 20px;
            padding: 20px 0 20px 20px;
            background: #ffffff;
            border-bottom: solid 1px $border_color;
            &:last-child {
              margin-bottom: 0;
            }
            .goods-promo {
              margin: 0 25px 20px 0;
              padding-bottom: 10px;
              overflow: hidden;
              .promo-item {
                float: left;
              }
              .goods-desc {
                float: right;
                height: 24px;
                line-height: 24px;
                font-size: 14px;
                color: #e50000;
              }
            }
            .col {
              padding: 0;
            }
            .cell-checkbox {
              margin-right: 24px;
              padding-top: 61px;
            }
            .cell-img {
              margin-right: 20px;
              img {
                border: solid 1px $border_color;
              }
            }
            .cell-goods {
              padding-top: 5px;
              width: 960px;
              .goods-name {
                margin-bottom: 18px;
                line-height: 20px;
                width: 360px;
                overflow:hidden;
                color: $f_main;
                text-overflow:ellipsis;
                white-space: nowrap;
                &:hover {
                  text-decoration: none;
                  color: $red;
                }
              }
              .goods-form {
                margin-top: 12px;
                margin-left: 0;
                margin-right: 0;
                font-size: $fz_14;
                color: $f_main;
                line-height: 26px;
                text-align: center;
                .cell-cehckbox {
                  margin-right: 8px;
                }
                .cell-unit {
                  width: 252px;
                  text-align: left;
                }
                .cell-count {
                  width: 90px;
                }
                .cell-price {
                  width: 200px;
                  .sell-price {
                    padding-right: 10px;
                    font-size: $fz_14;
                    color: $f_main;
                  }
                  .original-price {
                    font-size: $fz_12;
                    color: $f_sub;
                  }
                }
                .cell-sum {
                  width: 154px;
                  color: $red;
                }
                .cell-action {
                  // margin-right: 20px;
                  width: 185px;
                  text-align: right;
                  .btn {
                    margin: 0 5px;
                    cursor: pointer;
                    &:hover {
                      color: $red;
                      text-decoration: underline;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .empty-box {
    padding: 50px 0;
    text-align: center;
    img {
      display: inline-block;
      margin-bottom: 30px;
    }
    .tip {
      font-size: 20px;
      color: $f_normal;
    }
  }
}
.tea-selection {
  position: relative;
  margin: 0 auto 50px;
  width: 1200px;
  height: 390px;
  .product-box {
    border: solid 1px transparent;
    &:hover {
      background: #ffffff;
      border: solid 1px $green;
    }
  }
  .prev-btn,
  .next-btn {
    margin-top: -28px;
    width: 56px;
    height: 56px;
    line-height: 56px;
    font-size: 24px;
    text-align: center;
    color: #ffffff;
    background: #e5e5e5;
    border-radius: 50%;
  }
  .prev-btn {
    left: -74px;
  }
  .next-btn {
    right: -74px;
  }
}
.cart-floatbar-wrapper {
  height: 70px;
  .cart-floatbar {
    width: 100%;
    height: 70px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    &.fixed {
      position: fixed;
      z-index: 999;
      bottom: 0;
      left: 0;
    }
    .w {
      margin: 0 auto;
      width: 1200px;
      height: 100%;
      .col {
        padding: 0;
        height: 100%;
        font-size: $fz_16;
        line-height: 70px;
      }
      .cell-checkbox {
        padding-left: 30px;
        padding-right: 30px;
      }
      .cell-action {
        margin-right: 380px;
        .btn {
          cursor: pointer;
          &:hover {
            color: $red;
            text-decoration: underline;
          }
        }
      }
      .cell-total {
        margin-right: 62px;
        .total-count {
          padding: 4px;
          color: $red;
        }
      }
      .cell-sum {
        .total-price {
          padding: 0 4px;
          color: $red;
          font-size: 22px;
          letter-spacing: 1px;
        }
        .description {
          font-size: 18px;
        }
      }
      .cell-account {
        float: right;
        width: 240px;
        font-size: 24px;
        text-align: center;
        letter-spacing: 2px;
        color: #ffffff;
        background: #e60509;
        cursor: pointer;
      }
    }
  }
}
</style>
